<template>
  <div>
    <el-dialog v-bind="$attrs" v-on="$listeners" :visible.sync="showDialog" @open="onOpen" @close="onClose"
               title="修改薪资">
      <el-row :gutter="15">
        <el-form ref="elForm" :model="formData"  :rules="rules" size="medium" label-width="80px">
          <el-col :span="24">

          </el-col>
          <el-col :span="12">
            <el-form-item label="员工编号" prop="eId">
              <el-input v-model="formData.eId" placeholder="请输入员工编号" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="基本工资" prop="basePay">
              <el-input v-model="formData.basePay" placeholder="请输入基本工资" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="五险一金" prop="insurance">
              <el-input v-model="formData.insurance" placeholder="请输入五险一金" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="效工资绩" prop="meritPay">
              <el-input v-model="formData.meritPay" placeholder="请输入效工资绩" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="津贴" prop="subsidyPay">
              <el-input v-model="formData.subsidyPay" placeholder="请输入津贴" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
            <el-form-item label="加班费" prop="overtimePay">
              <el-input v-model="formData.overtimePay" placeholder="请输入加班费" clearable :style="{width: '100%'}">
              </el-input>
            </el-form-item>
          </el-col>

        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import ImageCropper from "../../components/ImageCropper/index";
  import PanThumb from "../../components/PanThumb/index";

  export default {
    name: "SalaryUpdate",
    components: {ImageCropper, PanThumb},

    // 接受父组件传递的值
    props: {
      p_eId: {type: String},
      updateVisible: {
        type: Boolean,
        default:
          false
      }
      ,
    }
    ,
    data() {
      return {
        formData: {
          eId: undefined,
          basePay: undefined,
          insurance: undefined,
          meritPay: undefined,
          subsidyPay: undefined,
          overtimePay: undefined,

        },
        // 控制弹出框显示隐藏

        showDialog: false,
        imagecropperShow: false, // 是否显示上传组件
        imagecropperKey: 0, // 上传组件id
        image: 'http://47.93.37.158:8888/group1/M00/00/00/rBklB2B6dKSAImyzAAIcU_dRVxE613.png',
        rules: {
          eId: [{
            required: true,
            message: '请输入员工编号',
            trigger: 'blur'
          }]
          ,basePay: [{
            required: false,
            message: '请输入基本工资',
            trigger: 'blur'
          }],
          insurance: [{
            required: true,
            message: '请选择五险一金',
            trigger: 'blur'
          }],
          meritPay: [{
            required: true,
            message: '请输入效工资绩',
            trigger: 'blur'
          }]
          ,subsidyPay: [{
            required: false,
            message: '请输入津贴',
            trigger: 'blur'
          }],
          overtimePay: [{
            required: true,
            message: '请输入加班费',
            trigger: 'blur'
          }],
        },
        field101Action: 'https://jsonplaceholder.typicode.com/posts/',
        field101fileList: [],

      }
    }
    ,
    computed: {}
    ,
    watch: {
      // 监听 addOrUpdateVisible 改变
      updateVisible(oldVal, newVal) {
        this.showDialog = this.updateVisible;
        this.$axios.get("/sys/salary/"+this.p_eId,this.formData).then((response) => {
          // console.log(this.eId)
          this.formData=response.data.data;
          // console.log(response);
        });
      }
    }
    ,
    created() {


    }
    ,
    mounted() {
    }
    ,
    methods: {

      onOpen() {

      }
      ,
      onClose() {
        this.$refs['elForm'].resetFields()
        this.$emit('changeShowUpdate', 'false')
      }
      ,
      close() {
        this.$emit('changeShowUpdate', 'false')
      },

      async handelConfirm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return;

          this.$axios.put("/sys/salary/"+this.p_eId, this.formData).then((response) => {
            console.log( this.formData);
            console.log(this.dNums)
          });
          location.reload()
        })
      }

    }
  }
</script>

<style scoped>

</style>
